<template>
  <div>
    <nav-header :headerTitle="'提现记录'" :navBgColor="'#fff'"></nav-header>
    <div class="nav-height"></div>
    <div class="withdrawal-record">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="gainListByPages"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
      >
        <div class="record-item" v-for="item in list" :key="item">
          <div class="record-item-left">
            <p class="title">{{item.remark}}</p>
            <p class="time" v-if="item.processStatus==0">申请时间:{{item.createTime}}</p>
            <p class="time" v-else-if="item.processStatus==1">到账时间:{{item.modifyTime}}</p>
            <p class="time" v-else-if="item.processStatus==2">转账失败:{{item.modifyTime}}</p>
            <p class="time" v-else-if="item.processStatus==3">转账失败:{{item.modifyTime}}</p>
          </div>
          <div class="record-item-right">
            <p class="money">-{{item.actualAmount}}</p>
            <p class="time colorFF" v-if="item.processStatus==0">处理中</p>
            <p class="time color818181" v-else-if="item.processStatus==1">已到账</p>
            <p class="time colorFF" v-else-if="item.processStatus==2">已拒绝</p>
            <p class="time colorFF" v-else-if="item.processStatus==3">处理失败</p>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
import navHeader from "@/components/NavHeader";
import {  List  } from 'vant' 
import mixin from '@/utils/mixin'

Vue.use(List)
export default {
  name: "withdrawalRecord",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      list: [],
      finished: false,
      loading: false,
      error: false,
      // list 分页信息
      pageNum: 1,
      pageSize: 10
    };
  },
  mounted() {
    // this.gainListByPages();
  },
  methods: {
    formatDate(date) {
      let d = new Date(date),
        year = d.getFullYear(),
        month = "" + (d.getMonth() + 1),
        day = "" + d.getDate(),
        hour = "" + d.getHours(),
        minute = "" + d.getMinutes();
      if (month.length < 2) month = "0" + month;
      if (day.length < 2) day = "0" + day;
      if (hour.length < 2) hour = "0" + hour;
      if (minute.length < 2) minute = "0" + minute;
      return `${year}-${month}-${day} ${hour}:${minute}`;
    },

    //  list加载  根据文章类型id获取文章list 分页
    gainListByPages() {
      let sendData = {
        uniqueId: window.localStorage.getItem("uniqueIdByInfluencer"),
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      this.$http.post("exchange/getWithdrawPage", sendData).then(
        res => {
          let resData = res.data;
          resData.items.forEach(element => {
            if (element.modifyTime) {
              element.modifyTime = this.formatDate(element.modifyTime);
            }
            if (element.createTime) {
              element.createTime = this.formatDate(element.createTime);
            }
            element.actualAmount = element.actualAmount / 100;
          });
          this.list = this.list.concat(resData.items);
          ++this.pageNum;
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          if (resData.pages < this.pageNum) {
            this.finished = true;
          }
        },
        err => {
          this.error = true;
          console.log(err);
        }
      );
    }
  }
};
</script>

<style scoped lang="scss">
.colorFF {
  color: rgba(255, 37, 37, 1) !important;
}
.color818181 {
  color: rgba(129, 129, 129, 1) !important;
}
.withdrawal-record {
  width: 686px;
  margin: auto;
  .record-item {
    display: flex;
    padding: 34px 0;
    border-bottom: 1px solid rgba(237, 237, 237, 1);
    .time {
      height: 40px;
      font-size: 28px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(129, 129, 129, 1);
      line-height: 40px;
      margin-top: 12px;
    }
    .record-item-left {
      width: 490px;
      font-size: 32px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 49, 51, 1);
      line-height: 45px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .title {
        height: 59px;
      }
    }
    .record-item-right {
      flex: auto;
      height: 100%;
      position: relative;
      text-align: right;
      .money {
        height: 59px;
        font-size: 42px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(129, 129, 129, 1);
        line-height: 59px;
      }
    }
  }
}
</style>
